<template>
  <view class="myfarm">
    <navbars
      title="我的农地"
      urls="/pages/cart/index"
      types="switchTab"
      imgs="/static/cars.jpg"
    />
    <navigator
      url="/pages/mine/index"
      open-type="switchTab"
      hover-class="none"
      class="ico"
    >
      <u-icon size="30" name="/static/cx.jpg"></u-icon>
    </navigator>
    <swiper
      :indicator-dots="swiperList.length > 1"
      class="swiper"
      v-if="swiperList.length > 0"
    >
      <swiper-item v-for="(item, i) in swiperList" :key="i">
        <view class="farms">
          <view class="farms-lf">
            <view class="nd">
              <text class="my">我的农地</text>
              <text class="dz">汉阳</text>
            </view>
            <image
              class="logo"
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F34830997%2F282b32547eff4d6e9fdaadacc0ac90e4.jpg%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvMzQ4MzA5OTcvMjgyYjMyNTQ3ZWZmNGQ2ZTlmZGFhZGFjYzBhYzkwZTQuanBn%2Fsign%2F43dde7a945941a19b76aadc9d317fa14.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1716621422&t=d144fb6992655b71d3d35469b2bcad00"
              mode="scaleToFill"
              @click="ClickImage(item)"
            ></image>
          </view>
          <view class="myfarms">
            <view class="farmslfs">
              <text class="ss">所属农场</text>
              <text>大王农场</text>
              <text class="ss">采摘草莓</text>
              <view class="lie">
                <u-icon
                  name="star-fill"
                  color="#EEA427"
                  class="ico"
                  size="30"
                ></u-icon>
                <text class="icc">4.9</text>
              </view>
              <view class="lie">
                <u-icon name="chat" color="#000" class="ico" size="30"></u-icon>
                <text class="icc">联系商家</text>
              </view>
            </view>
            <view class="farms-rg">
              <text><text class="pir">期&emsp;&emsp;限:</text>10天/365天</text>
              <text><text class="pir">种植作物:</text>鱼塘 10㎡</text>
              <text><text class="pir">农事提醒:</text>喂养</text>
              <text
                ><text class="pir">垂钓次数:</text>2/10<span
                  >您还有垂钓次数没用完哦</span
                ></text
              >
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  components: {},
  data: () => ({
    swiperList: [1, 2],
  }),
  computed: {},
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  onLoad(options) {},
  // 生命周期 - 页面展示（不可以访问DOM元素）
  onShow() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  onReady() {},
  // 方法集合
  methods: {
    ClickImage(res) {
      uni.previewImage({
        // urls: res.tempFilePaths,
        urls: [
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F34830997%2F282b32547eff4d6e9fdaadacc0ac90e4.jpg%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvMzQ4MzA5OTcvMjgyYjMyNTQ3ZWZmNGQ2ZTlmZGFhZGFjYzBhYzkwZTQuanBn%2Fsign%2F43dde7a945941a19b76aadc9d317fa14.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1716621422&t=d144fb6992655b71d3d35469b2bcad00",
        ],
        longPressActions: {
          itemList: ["发送给朋友", "保存图片", "收藏"],
          success: function (data) {
            console.log(
              "选中了第" +
                (data.tapIndex + 1) +
                "个按钮,第" +
                (data.index + 1) +
                "张图片"
            );
          },
          fail: function (err) {
            console.log(err.errMsg);
          },
        },
      });
    },
  },
};
</script>

<style lang='scss' scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

.swiper {
  height: 1120rpx;
  //   background-color: #fff;
  ::v-deep .uni-swiper-dot {
    background: #e7e7e7;
    &.uni-swiper-dot-active {
      width: 50rpx;
      border-radius: 10rpx;
      background: #b1b1b1;
    }
  }
}
.myfarm {
  font-family: "Poppins";
  background-color: #f9f9f9;
  position: absolute;
  width: 100%;
  height: 100%;
  .ico {
    margin-left: 5%;
  }
  .farms {
    background-color: white;
    display: flex;
    flex-direction: column;
    // justify-content: space-around;
    align-items: center;
    width: 80%;
    margin: 0 auto;
    border-radius: 5%;
    // position: relative;
    padding: 20rpx;
    &::before {
      position: absolute;
      top: -2%;
      left: 8%;
      content: "";
      width: 100rpx;
      height: 100rpx;
      background: url("/static/wd.png") no-repeat;
      background-size: cover;
    }
    .farms-lf {
      .logo {
        margin-top: 20rpx;
        width: 600rpx;
        height: 640rpx;
        border-radius: 10rpx;
      }
      .nd {
        margin-left: 5%;
        font-size: 30rpx;
        .my {
          z-index: 99;
          position: relative;
        }
        .dz {
          margin-left: 5%;
          font-size: 20rpx;
        }
      }
    }
    .myfarms {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 20rpx 0;
      .farmslfs {
        width: 40%;
        display: flex;
        margin-left: 1%;
        flex-direction: column;
        align-items: center;
        .ss {
          font-size: 28rpx;
          color: #b1b1b1;
        }
        .lie {
          display: flex;
          align-items: center;
          .icc {
            margin-left: 20rpx;
            color: #b1b1b1;
            font-size: 26rpx;
          }
        }
      }
      .farms-rg {
        flex: 1;
        margin-left: 5%;
        display: flex;
        flex-direction: column;

        text {
          margin: 10rpx 0;
          font-size: 24rpx;
          span {
            color: #bbbbbb;
            font-size: 20rpx;
            margin-left: 20rpx;
          }
          .pir {
            margin-right: 20rpx;
          }
        }
      }
    }
  }
}
</style>

